import React, { useState, useRef } from "react"
import './Store.less';
import { Dialog, List, SwipeAction, Action } from 'antd-mobile'



import ViewHeader from 'Co/ViewHeader';
import { flushSync } from "react-dom";
import QueryString from "qs";




const Store = function (props) {
    const { navigate } = props
    const ref = useRef(null);
    const handler = useRef(null);
    const giftsMapRef = useRef({})
 
    const giftRef = (ele  , giftId) =>{
           giftsMapRef.current['gift-'+giftId] = ele;
       }
    
    let [listArr, setListArr] = useState(() => [

        {
            contentDetail: '1.本专栏《一出好戏的前世今生——赖声川的36堂编剧与创意课》共36期；\r\n2.《一出好戏的前世今生——赖声川的36堂编剧与创意课》为付费视频专栏，成功购买即可获得该专栏已发布的36期视频内容；\r\n3. 已购买内容在豆瓣APP和豆瓣时间微信公众号均可收看或阅读；\r\n4. 请理解本专栏作为虚拟服务内容，购买成功后将不接受退款请求；\r\n5. 严禁任何形式的翻录或转载，严禁在第三方平台传播，违者将追究法律责任； \r\n6. 订阅或付费中有任何问题，请点击此链接联系客服：https://help.douban.com/help/ask?app=1;；\r\n7. 购买本专栏的用户，亦可同步关注微信公众号【豆瓣时间】，参与话题讨论。领取会员特权则请回复关键词【福利】。',
            id: 3819860,
            type: 'bookDetailUrl',
        },
        {
            contentDetail: '2.何非（朱一龙 饰）的妻子李木子在结婚周年旅行中离奇消失，在何非苦寻无果之时妻子（文咏珊 饰）再次现身，何非却坚持眼前的陌生女人并非妻子，妻子拿出了身份证明进行自证，夫妻二人似乎都有不可告人的秘密，随着金牌律师陈麦介入到这起离奇案件中，更多的谜团慢慢浮现…… 本片改编自苏联电影《为单身汉设下的陷阱 Ловушка для одинокого мужчины》。',
            id: 35056376,
            type: 'moveDetailUrl',
        },
    ])


    const confirm = (id) => {
        console.log('dddd', id, listArr.filter((e) => e.id !== id))
        setTimeout(() => {
            // 模拟ajax
            setListArr([].concat(listArr.filter((e) => e.id !== id)))
        }, 1000)
    }

    const goDetailView  = (to,id) => {
        navigate({
            pathname:`/detail/${id}`,
            search:QueryString.stringify({url:to ,})
            // search:`url=${to}`
        })
    }

    return (
        <>
            <div className="Store-box">
                <ViewHeader title="收藏中心" navigate={navigate} />
                <div>
                    {
                        listArr.map((e, index) => {

                            return <List key={e.id + index}>
                                <SwipeAction
                                    ref={($event)=> giftRef($event, e.id)} 
                                    closeOnAction={false}
                                    closeOnTouchOutside={false}
                                    rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',
                                            onClick: async () => {
 
                                                handler.current = await Dialog.show({
                                                    bodyClassName: 'store-dialog',
                                                    closeOnAction: true,
                                                    content: <div className="content"  >
                                                        确定要删除收藏吗？
                                                    </div>,
                                                    actions: [
                                                        [
                                                            {
                                                                key: 'cancel',
                                                                text: '取消',
                                                                onClick:async () => {
                                                                 
                                                                },
                                                            },
                                                            {
                                                                key: 'delete',
                                                                text: '删除',
                                                                bold: true,
                                                                danger: true,
                                                                onClick: () => {
                                                                    confirm(e.id)
                                                                   
                                                                },
                                                            },
                                                        ],
                                                    ],

                                                })
                                                giftsMapRef?.current['gift-'+e.id]?.close()

                                            },
                                        },
                                    ]}
                                >
                                    <List.Item>
                                        <div className="contentDetail" onClick={ ()=>goDetailView(e.type ,e.id)}>
                                            {e.contentDetail}
                                        </div>
                                    </List.Item>
                                </SwipeAction>
                            </List>
                        })
                    }

                </div >
            </div >;
        </>
    )

}

export default Store